﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
            #breadcrumbs {
    padding: 0;
    margin: 0;
    height: 30px;
    font: bold 14px/30px arial; /* line-height MUST be the same as height */
    list-style-type:none;
    background: #CCCCCC;
    }
    #breadcrumbs li {
    float: left; /*ie6/7 needs this */
    }
    #breadcrumbs a {
    float: left;
    position:relative;
    padding: 0 20px 0 10px;
    color: #000000;
    text-decoration: none;
    outline: none;
    }
    #breadcrumbs a.odd {
    background: #e9e9e9;
    }
    #breadcrumbs span {
    position: absolute;
    display: block;
    line-height: 0px;
    height: 0px;
    width: 0px;
    right: 0px;
    top: 0px;
    border-left: 10px solid #CCCCCC;
    border-right: none;
    border-top: 15px solid #e9e9e9;
    border-bottom: 15px solid #e9e9e9;
    }
    #breadcrumbs a.odd span {
    border-left: 10px solid #e9e9e9;
    border-top: 15px solid #CCCCCC;
    border-bottom: 15px solid #CCCCCC;
    }
        /* classes for jquery hover */
    #breadcrumbs a.hover {
    text-decoration: none;
    background: #999999;
    }
    #breadcrumbs a span.hover {
    border-left: 10px solid #999999;
    }
    #breadcrumbs a span.pre_hover {
    border-top: 15px solid #999999;
    border-bottom: 15px solid #999999;
    }
    </style>
    <script type="text/javascript">
        $("#breadcrumbs a").hover(
function () {
    $(this).addClass("hover").children().addClass("hover");
    $(this).parent().prev().find("span.arrow:first").addClass("pre_hover");
},
function () {
    $(this).removeClass("hover").children().removeClass("hover");
    $(this).parent().prev().find("span.arrow:first").removeClass("pre_hover");
}
);
    </script>
</head>
<body>
    <div>
        <ol id="breadcrumbs">
            <li><a class="" href="#">Home<span></span></a></li>
            <li><a class="" href="#">World news<span class="arrow"></span></a></li>
            <li><a class="" href="#">America<span class="arrow"></span></a></li>
            <li><a class="" href="#">Economics<span class="arrow"></span></a></li>
            <li><a class="" href="#">&nbsp;&nbsp;The currently selected page<span class="arrow"></span></a></li>
        </ol>

    </div>
</body>
</html>
